<html>
	<head>
		<title>jquery的选择器</title>
		<meta charset="UTF-8"/>
		<!--
			jquery的选择器学习：
				基本选择器
					id选择器
					标签选择器
					类选择器
					组合选择器
				层级选择器	
				简单选择器
				内容选择器
				可见性选择器
				属性选择器
				子元素选择器
				表单选择器
				
				注意：
					jQuery中选择器获取的是存储了HTML元素对象的数组。
					jquery获取的元素对象不能够直接使用js的内容，按照数组的取出方式将对象取出后可以使用js的内容。
				jquery对我们提供了多种多样的选择器来选择需要操作的HTML元素对象。
		-->
		<!--引入jQuery文件-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<!--声明js代码域-->
		<script type="text/javascript">
			//id选择器
			function testId(){
				//jquery--id
				var inp=$("#uname");
				alert(inp.val());
			}
			//标签选择器
			function testEle(){
				var inps=$("input");
				alert(inps[1].value);	
			}
			//类选择器
			function testClass(){
				var inps=$(".common");
				alert(inps.length);
			}
			//组合选择器：
			function testAll(){
				var eles=$("h3,input");
				alert(eles.length);
			}
			//测试子选择器
			function testChild(){
				var inps=$("#showdiv>input");
				alert(inps.length);
			}
			//测试层级选择器
			function testCj(){
				var inp=$("input:first");
				alert(inp.val());
				
			}
			function testCj2(){
				var tds=$("td:not(td[width])");
				alert(tds.html());
			}
		</script>
		<style type="text/css">
			.common{}
			div{
				width: 300px;
				height: 100px;
				border: solid 2px orange;
			}
			
		</style>
	</head>
	<body>
		<h3>jquery的选择器</h3>
		<input type="button" name="" id="" value="测试id"  onclick="testId()" class="common"/>
		<input type="button" name="" id="" value="测试标签选择器"  onclick="testEle()"/>
		<input type="button" name="" id="" value="测试类选择器"  onclick="testClass()"/>
		<input type="button" name="" id="" value="测试组合选择器"  onclick="testAll()"/>
		<hr />
		用户名: <input type="text" name="uname" id="uname" value="张三" class="common"/>
		<hr />
		<input type="button" name="" id="" value="测试子选择器" onclick="testChild()" />
		<input type="button" name="" id="" value="测试层级选择器--first" onclick="testCj()" />
		<input type="button" name="" id="" value="测试层级选择器--not" onclick="testCj2()" />
		<hr />
		<div id="showdiv">
			<input type="text" name="" id="" value="" />
			<input type="text" name="" id="" value="" />
			<input type="text" name="" id="" value="" />
			<input type="text" name="" id="" value="" />
		</div>
		<div id="">
			<input type="text" name="" id="" value="" />
			<input type="text" name="" id="" value="" />
			<input type="text" name="" id="" value="" />
			<input type="text" name="" id="" value="" />
		</div>
		<table border="1px" height="200px">
			<tr>
				<td width="100px"></td>
				<td width="100px"></td>
				<td width="100px"></td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
		</table>
	</body>
</html>